<template>
  <div class="home-page">
    <van-search
      label="上海"
      v-model="value"
      placeholder="︱请输入小区或地址"
      background="RGBA(0,0,0,0)"
      left-icon="arrow-down"
      @click="$router.push('/citylist')"
    >
    </van-search>
    <van-icon name="location-o" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item.id">
        <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-grid>
      <van-grid-item
        icon=""
        text="整租"
      />
      <van-grid-item
        icon=""
        text="合租"
      />
      <van-grid-item
        icon=""
        text="地图找房"
      />
      <van-grid-item
        icon=""
        text="去出租"
        to="/rent"
      />
    </van-grid>
    <van-nav-bar
      left-text="租房小组"
      right-text="更多"
      @click-right="onClickRight"
    />
    <Groups></Groups>
  </div>
</template>

<script>
import Groups from '@/components/Groups.vue'
import { swiper } from '@/api/user'
export default {
  components: {
    Groups
  },
  data () {
    return {
      value: '',
      list: []
    }
  },
  async created () {
    const { body } = await swiper()
    this.list = body
  },
  methods: {
    onClickRight () {}
  }
}
</script>

<style lang="less" scoped>
.home-page {
  position: relative;
  .my-swipe .van-swipe-item {
    height: 212px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img {
      width: 100%;
    }
  }
  .van-search {
    width: 330px;
    height: 24px;
    position: absolute;
    top: 30px;
    left: 10px;
    z-index: 10000;
  }
  .van-icon {
    color: #fff;
    position: absolute;
    font-size: 30px;
    top: 28px;
    right: 10px;
    z-index: 10000;
  }
  /deep/.van-icon__image {
    width: 50px;
    height: 50px;
  }
  /deep/ .van-nav-bar {
    .van-nav-bar__left {
      .van-nav-bar__text {
        font-size: 15px;
        color: #333;
        font-weight: 700;
      }
    }
    .van-nav-bar__right {
      .van-nav-bar__text {
        font-size: 15px;
        color: #787d82;
      }
    }
  }
}
</style>
